<template>
  <!-- 工业总览 -->
  <div class="industrial-overview">
    <div class="top-box">
      <div class="item" v-for="(i, k) in topList" :key="k">
        <div class="label">{{ i.label }}</div>
        <div class="value" v-if="i.unit == '%'">
          <img
            src="@/assets/industrialOperation/red-rise.png"
            class="img yidong"
            alt=""
          />
          <span class="val">
            <CountTo :startVal="0" :endVal="i.value" :duration="1000"
          /></span>
          <span class="unit"> {{ i.unit }}</span>
        </div>
        <div class="value" v-else>
          <span class="val2">
            <CountTo :startVal="0" :endVal="i.value" :duration="1000"
          /></span>
          <span class="unit2"> {{ i.unit }}</span>
        </div>
      </div>
    </div>
    <div class="list">
      <div
        v-for="(i, k) in list"
        :class="['item', { item2: k % 2 !== 0 }]"
        :key="k"
      >
        <div class="list-item-block" v-for="(x, y) in i" :key="y">
          <div class="label">{{ x.label }}</div>
          <div class="value" v-if="x.unit !== '%'">
            <CountTo :startVal="0" :endVal="x.value" :duration="1000" />
            <span class="unit">{{ x.unit }}</span>
          </div>
          <div class="value" v-else>
            <img
              src="@/assets/industrialOperation/red-rise.png"
              class="img"
              alt=""
            />
            <span class="val">
              <CountTo :startVal="0" :endVal="i.value" :duration="1000"
            /></span>
            <span class="uni"> {{ x.unit }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
  components: {
    CountTo
  },
  data() {
    return {
      topList: [
        {
          label: '工业投资',
          value: '12',
          unit: '%'
        },
        {
          label: '工业税收',
          value: '568',
          unit: '亿元'
        },
        {
          label: '工业技改投资',
          value: '12',
          unit: '%'
        }
      ],
      list: [
        [
          { label: '全市工业用电量', value: '1234', unit: '亿千瓦时' },
          { label: '全市工业用电量环比增速', value: '12', unit: '%' }
        ],
        [
          { label: '重点工业品价格', value: '7349', unit: '元' },
          { label: '重点行业生产负荷', value: '12', unit: '%' }
        ],
        [
          { label: '增值税发票本期户数', value: '1234', unit: '户' },
          { label: '增值税发票去年户数', value: '1234', unit: '户' }
        ],
        [
          { label: '增值税发票本期金额', value: '1234', unit: '日均万元' },
          { label: '增值税发票去年金额', value: '1234', unit: '日均万元' }
        ],
        [
          { label: '全市市场主体登记数量', value: '1234', unit: '亿千瓦时' },
          { label: '期末实有市场主体数量', value: '12', unit: '' }
        ],
        [
          { label: '本周交通运输公路货运量', value: '1234', unit: '亿千瓦时' },
          { label: '本周交通运输港口吞吐量', value: '12', unit: '' }
        ],
        [
          {
            label: '本周交通运输集装箱吞吐量',
            value: '1234',
            unit: '万吨'
          },
          { label: '期末实有市场主体数量', value: '1234', unit: '万吨公里' }
        ]
      ]
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.industrial-overview {
  height: 100%;
  .top-box {
    display: flex;
    gap: 8px;
    .item {
      flex: 1;
      height: 53px;
      background: rgba(43, 101, 156, 0.36);
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #2b659c;

      .label {
        height: 50%;
        font-family: MicrosoftYaHeiUI;
        font-size: 16px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .value {
        height: 50%;
        background: url('~@/assets/industrialOperation/cobwebbing.png') center
          center/cover;
        display: flex;
        align-items: center;
        justify-content: center;

        .img {
          width: 14px;
          height: 18px;
        }
        .val {
          font-family: MicrosoftYaHeiUI;
          font-size: 16px;
          color: red;
          font-weight: bold;
        }
        .unit {
          font-family: MicrosoftYaHeiUI;
          font-size: 14px;
          color: red;
        }
        .val2 {
          font-family: MicrosoftYaHeiUI;
          font-size: 16px;
          color: #fff;
          font-weight: bold;
        }
        .unit2 {
          font-family: MicrosoftYaHeiUI;
          font-size: 16px;
          color: #fff;
          font-size: 14px;
        }
      }
    }
  }
  .list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    .item {
      width: 100%;
      height: 64px;
      box-sizing: border-box;
      border-left: 2px solid #27b0f7;
      border-right: 2px solid #27b0f7;
      background-color: rgba(17, 53, 94, 0.56);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .list-item-block {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 16px;
        .label {
          font-family: MicrosoftYaHeiUI;
          font-size: 14px;
          color: #ffffff;
          margin-bottom: 5px;
        }
        .value {
          font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
          font-weight: bold;
          font-size: 18px;
          color: #ffde00;

          .unit {
            font-family: MicrosoftYaHeiUI;
            font-weight: normal;
            font-size: 12px;
            color: #ffffff;
            margin-left: 3px;
          }
          .img {
            width: 14px;
            height: 18px;
          }
          .val {
            font-family: MicrosoftYaHeiUI;
            font-size: 16px;
            color: red;
            font-weight: bold;
          }
          .uni {
            font-family: MicrosoftYaHeiUI;
            font-size: 14px;
            color: red;
          }
        }
      }
    }
    .item2 {
      border: none;
      background-color: rgba(17, 53, 94, 0.36);
      position: relative;
      &:after {
        content: '';
        width: 2px;
        height: 16px;
        background: #27b0f7;
        position: absolute;
        top: 24px;
        left: 0;
      }
      &::before {
        content: '';
        width: 2px;
        height: 16px;
        background: #27b0f7;
        position: absolute;
        top: 24px;
        right: 0;
      }
    }
  }
  .yidong {
    // animation: moveUpAndFadeIn 0.5s forwards;
  }
  @keyframes moveUpAndFadeIn {
    from {
      //   opacity: 0.5;
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
</style>
